<template>
    <div class="carousel">
        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane
                    :label="'位置:'+item.position"
                    :name="item.position.toString()"
                    v-for="item in carouselList"
                    :key="item.position"
                >
                    <carouselList
                        :carouselList="item.data"
                        @change="change($event);dialogFormVisible = true"
                        @del="del"
                    ></carouselList>
                </el-tab-pane>
                <el-tab-pane label="新增轮播图" name="add">
                    <carouselAdd :addTemp="{...addTemp}" @refresh="refresh"></carouselAdd>
                </el-tab-pane>
                <!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>-->
                <carouselUpdate
                    :dialogFormVisible="dialogFormVisible"
                    @closeDialog="dialogFormVisible = false"
                    :toChangeRow="toChangeRow"
                    @refresh="refresh"
                ></carouselUpdate>
            </el-tabs>
        </template>
    </div>
</template>
<script>
import carouselAdd from "../../components/carousel/carouselAdd";
import carouselList from "../../components/carousel/carouselList";
import carouselUpdate from "../../components/carousel/carouselUpdate";
export default {
    name: "Carousel",
    data() {
        return {
            activeName: "1",
            toChangeRow: undefined,
            dialogFormVisible: false,
            addTemp: {
                url: "",
                position: "",
                description: "",
                sort: ""
            },
            list: []
        };
    },
    computed: {
        carouselList: function() {
            let arr = [];
            this.list.forEach((item, index) => {
                if (index == 0) {
                    arr.push({ position: item.position, data: [item] });
                } else {
                    let is_matched = false;
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].position == item.position) {
                            arr[i].data.push(item);
                            is_matched = true;
                        }
                    }
                    if (!is_matched) {
                        arr.push({ position: item.position, data: [item] });
                    }
                }
            });
            arr.sort((n1, n2) => n1.position - n2.position);
            return arr;
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        change: function(row) {
            // console.log({...row});
            this.toChangeRow = { ...row };
        },
        del: async function(row) {
            let data = await this._axios
                .get("/ycwAdmin/carousel/del?id=" + row.id)
                .then(data => data.data);
            console.log(data);
            if (data) {
                this.$alert(`${data.msg}`, {
                    confirmButtonText: "确定",
                    callback: () => {
                        this.$message({
                            type: "warning",
                            message: `${data.msg}`
                        });
                        this.refresh();
                    }
                });
            }
        },
        refresh: async function() {
            let data = await this._axios
                .get("/ycwAdmin/carousel/getImgs")
                .then(data => data.data.data);
            console.log(data);
            this.page_now = data.page_now;
            // this.total = data.page_total * data.page_num;
            this.list = data;
            // this.page_num = data.page_num;
        }
    },
    components: {
        carouselAdd,
        carouselList,
        carouselUpdate
    },
    mounted: async function() {
        this.refresh();
    }
};
</script>

<style lang="scss" scoped>
</style>